<template>
  <div>
      <button @click="sub">show</button>
    <mavon-editor
      v-model="value"
      ref="md"
      @imgAdd="$imgAdd"
      @change="change"
    />
    <!-- @imgDel="$imgDel" -->
  </div>
</template>

<script>
import 'mavon-editor/dist/css/index.css'
export default {
  data() {
    return {
      value: "**12121212121**",
      defaultData: "preview",
      hvalue: ""
    }
  },
  methods: {
    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("image", $file);
      axios({
        url: "server url",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" },
      }).then((url) => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm指为mavonEditor实例，可以通过如下两种方式获取
        //通过引入对象获取: import {mavonEditor} from ... 等方式引入后，此时$vm即为mavonEditor
        //通过$refs获取: html声明ref : <mavon-editor ref=md ></mavon-editor>， 此时$vm为 this.$refs.md`
        $vm.$img2Url(pos, url);
      });
    },
    change(v, h) {
        // this.hvalue = h
    },
    sub() {
        this.hvalue = this.$refs.md.d_render;
    }

  },
};
</script>